<template>
  <div class="filter_condition"
       :class="tab?'filter_condition_focus':''">
    <div class="operation_panel" @click="toggleFilterTabs">
      <div class="panel_left">
        <span class="panel_left_icon"></span>
        <span>{{$t('custom.filter')}}</span>
      </div>
      <div class="panel_right"
           v-if="num>0">
        <span class="filter_num">{{num === 0 ? '' : num}}</span>
        <span>{{$t('custom.filters')}}</span>
        <span class="focus_pgup icon_dismiss cuifont"
              @click="clearEveryFilter"></span>
      </div>
    </div>
    <div class="panel_content1"
         v-show="tab"
         @click.stop="">
      <div class="panel_content_select">
        <div class="pannel_select">
          <div class="condition_label">Properties</div>
          <el-select @change="typeChange" v-model="filterForm.properties" multiple size="mini" placeholder="Please Select" style="width: 100%" popper-class="properties">
            <el-option v-for="item in propertiesOptions" :label="item.label" :value="item.value" :key="item.value">
              <div>
                <span style="font-weight: bold">{{item.label}}</span>
                <div class="properties-desc">{{item.desc}}</div>
              </div>
            </el-option>
          </el-select>
        </div>
        <div class="pannel_select">
          <div class="condition_label">Status</div>
          <el-select v-model="filterForm.status"
                     multiple
                     size="mini"
                     placeholder="Please select"
                     :disabled="quickFilter === 'my-group'"
                     @change="typeChange">
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="pannel_select">
          <div class="condition_label">Affiliation</div>
          <el-select @change="typeChange" v-model="filterForm.affiliation" multiple size="mini" placeholder="Please Select" style="width: 100%">
            <el-option v-for="item in affiliationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
<!--        <div class="pannel_select">-->
<!--          <div class="condition_label">Create Date</div>-->
<!--          <el-date-picker v-model="filterForms.createdDateModel"-->
<!--                          type="datetimerange"-->
<!--                          unlink-panels-->
<!--                          @change="dateChange"-->
<!--                          range-separator="-"-->
<!--                          :start-placeholder="$t('datePicker.start')"-->
<!--                          :end-placeholder="$t('datePicker.end')">>-->
<!--          </el-date-picker>-->
<!--        </div>-->
        <div class="pannel_select ">
          <div class="condition_label">Creator</div>
          <el-select v-model="filterForm.creator"
                     filterable
                     multiple
                     size="mini"
                     placeholder="Please select"
                     popper-class="user_select"
                     @change="typeChange">
            <el-option v-for="item in userOption"
                       :key="item.creator"
                       :label="item.name"
                       :value="item.creator">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: {
    options: {
      type: Array
    },
    conditionItem: {
      type: String
    },
    quickFilter: String
  },
  watch: {
    conditionItem: function (val) {
      if (val === 'filter') this.tab = true
      else this.tab = false
    }
  },
  data () {
    return {
      fontSize: false,
      num: 0,
      tab: false,
      filterForms: {
        createdDateModel: null
      },
      filterForm: {
        properties: [],
        affiliation: [],
        status: [],
        creator: []
      },
      userOption: [],
      propertiesOptions: [
        { label: 'Private', value: 'Private', desc: 'Only those invited by the captain can join the group.' },
        { label: 'Public', value: 'Public', desc: 'Anyone can join the group by applying to the group captain.' }
      ],
      statusOptions: [
        { label: 'In Group', value: 1 },
        { label: 'Applying', value: 2 },
        { label: 'Not In Group', value: -1 }
      ]
    }
  },
  computed: {
    affiliationOptions () {
      const data = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'get_started_about_peer_groups').dataList
      const arr = data.map(item => {
        return { label: item.dictLabel, value: item.dictLabel }
      })
      return arr.concat([
        { label: 'Encore', value: 'Encore' },
        { label: 'MSP Advisor', value: 'MSP Advisor' },
        { label: 'Bering McKinley', value: 'Bering McKinley' }
      ])
    }
  },
  created () {
    this.getCreateUser()
  },
  methods: {
    async getCreateUser () {
      const { creatorPeerGroupUser } = this.$interface.system
      const { data } = await creatorPeerGroupUser({})
      this.userOption = data.data
    },
    toggleFilterTabs () {
      this.tab = !this.tab
    },
    dataSetFilterNum () {
      this.num = 0
      for (const key in this.filterForm) {
        if (Object.hasOwnProperty.call(this.filterForm, key)) {
          const element = this.filterForm[key]
          if ((Array.isArray(element) && element.length > 0) || (key === 'modelNum' && !(!element.min && !element.max))) this.num++
        }
      }
      for (const key in this.filterForms) {
        if (Object.hasOwnProperty.call(this.filterForms, key)) {
          const element = this.filterForms[key]
          if (Array.isArray(element) && element.length > 0) this.num++
        }
      }
    },
    typeChange (val) {
      this.dataSetFilterNum()
      this.$emit('filterProjectForm', this.filterForm)
    },
    dateChange () {
      if (this.filterForms.createdDateModel) {
        this.filterForm.createDate.from = this.fromatUtcDate(this.filterForms.createdDateModel[0])
        this.filterForm.createDate.to = this.fromatUtcDate(this.filterForms.createdDateModel[1])
      } else {
        this.filterForm.createDate.from = ''
        this.filterForm.createDate.to = ''
      }
      this.dataSetFilterNum()
      this.$emit('filterProjectForm', this.filterForm)
    },
    fromatUtcDate (date) {
      /** =============== MB-14684 =============== */
      return moment.tz(moment(date).format('YYYY-MM-DD HH:mm:ss'), this.$store.state.user.timezoneId).utc().format()
      /** =============== MB-14684 =============== */
    },
    clearEveryFilter (e) {
      e.stopPropagation()
      if (this.num === 0) return
      this.filterForm = {
        properties: [],
        affiliation: [],
        status: [],
        createDate: {
          to: '',
          from: ''
        },
        creator: []
      }
      this.filterForms.createdDateModel = null
      this.num = 0
      this.$emit('filterProjectForm', this.filterForm)
    }
  }
}
</script>
<style>
.properties .el-select-dropdown__item{
  height: auto;
}
</style>
<style lang="scss">
.filter_condition {
  margin-bottom: 4px;
  cursor: pointer;
  .operation_panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    padding: 6px 16px;
    .panel_left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .panel_left_icon {
        width: 14px;
        height: 14px;
        display: inline-block;
        background-image: url("#{$--ossLink}/app/view_pageheader/filter_catalogue.png");
        background-repeat: no-repeat;
        background-size: 14px;
        background-position: center;
        margin-right: 10px;
      }
    }
    .panel_right {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      background: $--theme-color-background;
      border-radius: 4px;
      padding: 0 8px;
      cursor: pointer;
      .filter_num {
        margin-right: 5px;
      }
      span {
        color: $--theme-color;
        font-weight: 400;
      }
      .focus_pgup {
        width: 12px;
        height: 12px;
        margin-left: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .focus_pgup::before {
        font-size: 12px;
        color: $--theme-color;
      }
    }
  }
  .panel_content1 {
    // display: none;
    // max-height: 607px;
    // overflow-y: auto;
    padding: 0 16px 16px;
    .panel_content_select {
      padding: 0px 0;
      .pannel_select:last-child {
        margin-bottom: 0;
      }
      .pannel_select {
        margin-bottom: 10px;
        .el-select,
        .el-date-editor {
          width: 100%;
        }
        .el-input__inner {
          height: 28px;
        }
        input::placeholder {
          font-size: 12px;
        }
        .condition_label {
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #404040;
          line-height: 20px;
        }
        .link_widgets_input {
          .el-input__inner {
            padding-right: 20px;
            padding-left: 20px;
            ::v-deep input::placeholder {
              color: #909399;
            }
          }
          ::v-deep input::placeholder {
            color: #909399;
          }
          .el-input__suffix {
            right: 0;
          }
          .el-input-number {
            line-height: 28px;
            .el-input-number__decrease {
              width: 26px;
              height: 26px;
            }
            .el-input-number__increase {
              width: 26px;
              height: 26px;
            }
          }
        }
        .link_widgets_input {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .span_blank {
            margin: 0 6px;
            display: inline-block;
            width: 9px;
            border: 1px solid #404040;
          }
        }
        .el-cascader {
          margin-bottom: 5px;
          line-height: 28px;
        }
        .el-date-editor .el-range__icon {
          line-height: 20px;
        }
        .el-range-separator {
          line-height: 20px;
        }
        .el-date-editor .el-range__close-icon {
          line-height: 20px;
        }
      }
    }
  }
}
.filter_condition:hover {
  background-color: #f6f7f9;
}
.filter_condition_focus {
  background-color: #f6f7f9;
}
.user_select {
  .el-select-dropdown__item {
    padding: 0 10px;
  }
  .selected {
    .header_select {
      background-image: url("#{$--ossLink}/app/view_pageheader/user_selected.png");
      background-repeat: no-repeat;
      background-size: 14px;
      background-position: center;
    }
  }
  .user_option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .header_img {
      width: 28px !important;
      height: 28px !important;
      line-height: 28px !important;
      text-align: center;
      margin-right: 10px;
      color: #fff;
      font-size: 12px;
      border-radius: 50%;
    }
    .header_name {
      flex: 1;
    }
    .header_select {
      width: 14px;
      height: 14px;
    }
  }
}
</style>
